<template>
  <div>
    生活馆数据管理
    <el-button type="primary" size="default" @click="handleLiveSave">
      爬取生活馆数据
    </el-button>
    <el-button type="primary" size="default" @click="handlePetSave">
      爬取宠物用品数据
    </el-button>

    <div class="card-list">
      <el-card
        v-for="(item, index) in liveList"
        :key="index"
        style="width: 250px"
        class="card"
      >
        <template #header>{{ item.name }}</template>
        <img
          v-bind:src="item.cover.url + '?x-oss-process=style/w500-webp'"
          style="width: 100%"
        />
        <template #footer>
          <el-button
            type="primary"
            size="default"
            @click="handleDialogShow(item)"
            >编辑</el-button
          >
          <el-button
            type="danger"
            size="default"
            @click="handleDel(item.objectId)"
            >删除</el-button
          >
        </template>
      </el-card>
    </div>

    <el-dialog title="编辑商品" v-model="dialogShow">
      <span>标题</span>
      <el-input v-model="edit.name" placeholder="请输入新标题"></el-input>
      <span>户型</span>
      <el-input v-model="edit.house_type" placeholder="请输入户型"></el-input>
      <span>风格</span>
      <el-input
        v-model="edit.style_name"
        placeholder="请输入装修风格"
      ></el-input>

      <template #footer>
        <span>
          <el-button @click="">取消</el-button>
          <el-button type="primary" @click="handleOk">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { reactive, ref } from "vue";
import {
  liveDel,
  liveGet,
  livePut,
  liveSave,
  petGet,
} from "../../service/api/live";
import { ElMessage } from "element-plus";
import "element-plus/dist/index.css";
const handleLiveSave = () => {
  liveSave();
};

// 渲染列表
let liveList = ref([]);
liveGet().then((results) => {
  liveList.value = results;
});

//爬取宠物用品数据
const handlePetSave = () => {
  petGet();
};

// 删除
//形参
const handleDel = async (id) => {
  let data = await liveDel(id); //删除数据库的数据
  ElMessage(data); //给用户明确的反馈提示
  if (data.type == "success") {
    //如何从一堆数据中找到你想移除的那一条数据
    for (let i = 0; i < liveList.value.length; i++) {
      if (liveList.value[i].objectId == id) {
        liveList.value.splice(i, 1); //删除数组中某条数据
        return; //找到后就停止
      }
    }
  }
};

//弹窗编辑
const dialogShow = ref(false); //控制弹窗显示
//reactive是另外一个适合做对象响应式方法
const edit = reactive({
  name: "",
  style_name: "",
  house_type: "",
});
const id = ref();
// 编辑按钮触发弹窗
const handleDialogShow = async (item) => {
  dialogShow.value = true;
  console.log(item);
  // let { name, style_name, house_type } = item; //解构赋值 等价于下面三句话
  // 提取item里面的数据 【默认数据】
  let name = item.name;
  let style_name = item.style_name;
  let house_type = item.house_type;
  //把item里面的数据设置给edit 【默认显示】
  edit.name = name;
  edit.style_name = style_name;
  edit.house_type = house_type;
  id.value = item.objectId; //记录待更新商品id
};
// 确认编辑按钮
const handleOk = async () => {
  let data = await livePut(id.value, edit); //更新数据库
  ElMessage(data);
  dialogShow.value = false;
  if (data.type == "success") {
    let list = liveList.value;
    for (let i = 0; i < list.length; i++) {
      if (list[i].objectId == id.value) {
        list[i] = {
          ...list[i], //原来数据
          ...edit, //新数据
        };
        liveList.value = [...list]; //确保视图实时刷新
        return; //找到后就停止
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.card-list {
  display: flex;
  flex-wrap: wrap;
  height: 70vh;
  overflow-y: scroll;
}
.card {
  margin: 10px;
}
.card img {
  height: 200px;
}
</style>
